<template>
  <div>
    <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品编码" prop="ItemTypeCode">
          <el-input v-model="model.ItemTypeCode"></el-input>
        </el-form-item>

        <el-form-item label="产品/物料" prop="ItemOrProduct">
          <el-radio-group v-model="model.ItemOrProduct">
              <el-radio label="产品">产品</el-radio>
              <el-radio label="物料">物料</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item label="名称" prop="ItemTypeName">
          <el-input v-model="model.ItemTypeName"></el-input>
        </el-form-item>
          
        <el-form-item label="父级分类" prop="ParentTypeName">
          <el-input v-model="model.ParentTypeName" :readonly="true" @focus="dialogVisible = true"></el-input>
        </el-form-item>

        <el-form-item label="是否启用" prop="EnableFlag">
          <el-radio-group v-model="model.EnableFlag">
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item class="page-box-footer">
          <el-button type="primary" @click="submitForm">{{ isUpdate?'立即保存':'立即创建' }}</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
  </el-form>
  

  <!--弹窗-->
  <el-dialog append-to-body :close-on-click-modal="false" title="选择父级" :visible.sync="dialogVisible"  width="80%">
    <SelectedItemType  @callback="callback" v-if="dialogVisible"/>
  </el-dialog>

  </div>

</template>
<script>
import SelectedItemType from './SelectedItemType.vue';

export default {
  components: {
    SelectedItemType
  },
  props:{
    model:{
      require:true,
      type:Object
    },
    isUpdate:{
      require:true,
      type:Boolean,
    }
  },
  data(){
    return{
      dialogVisible:false,
        rules:{
          ItemOrProduct: {required: true, message: '请选择产品/物料', trigger: 'blur'},
          ItemTypeName: {required: true, message: '请输入产品/物料名称', trigger: 'blur'},
          ParentTypeId: {required: true, message: '父级分类', trigger: 'blur'},
          EnableFlag: {required: true, message: '请选择是否主启用', trigger: 'blur'},
        }
      }
    },
    methods:{
      submitForm(){
        this.$refs['ruleForm'].validate((valid)=>{
          if(valid){
          if(this.isUpdate){
            this.put();
          }else{
            this.add();
          }
          }else{
            this.showNotify('请输入必填项');
            return false;
          }
        });
      },
      resetForm(){
        this.$refs['ruleForm'].resetFields();
      },
      add(){
        this.$http.postForm('/api/ItemType',{model:this.model},{loading:this.$loading()})
        .then(()=>{
          this.$emit('callback');
          this.showNotify('新增类别成功','success');
        })
      },
      put(){
        this.$http.putForm('/api/ItemType',{model:this.model},{loading:this.$loading()})
        .then(()=>{
          this.$emit('callback');
          this.showNotify('编辑类别成功','success');
        })
      },
      callback(model){
        //设置父级
        this.model.ParentTypeId = model.Id;
        this.model.ParentTypeName=model.ItemTypeName;
        this.dialogVisible=false;
      }
    }
  }
</script>

<style>

</style>